import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import {DetailWraper,Header,Content} from './style'

import {actionCreators} from './store'

 class Detail extends PureComponent {
    render() { 
        let {title,content} = this.props
        return (
            <DetailWraper>
                <Header>{title}</Header> 
                <Content dangerouslySetInnerHTML={{__html:content}}></Content>
            </DetailWraper>
        )
    }

    componentDidMount(){
        this.props.getDetail(this.props.match.params.id)
    }

}

const mapState = (state) => ({
    title: state.getIn(['detail','title']),
    content: state.getIn(['detail','content'])
})

const mapDispatch = (dispatch) => ({
    getDetail(id){
        dispatch(actionCreators.getDetail(id))
    }
})

export default connect(mapState,mapDispatch)(withRouter(Detail))